<template>
    <n-modal
      :title="title"
      :width="modelStyle.width"
      :visible="visible"
      :bodyStyle ="bodyStyle"
      :switchFullscreen="switchFullscreen"
      @cancel="handleCancel"
     >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">关闭</a-button>
        <a-button v-if="record.openType==='url'" type="primary" @click="toHandle">去处理</a-button>
      </template>
      <a-card class="daily-article" :loading="loading">
        <a-card-meta
          :title="record.deviceName"
          :description="'设备地址代号_序号: '+record.deviceCode ">
        </a-card-meta>
        <a-divider />
        <span v-html="record.content" class="article-content"></span>
      </a-card>
    </n-modal>
  </template>

  <script>

    import NModal from './NModal'
    export default {
      name: "SysNoticeModal",
      components: {
        NModal
      },
      data () {
        return {
          title:"通知消息",
          record: {},
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
          },
          visible: false,
          switchFullscreen: true,
          loading: false,
          bodyStyle:{
            padding: "0",
            height:(window.innerHeight*0.8)+"px",
            "overflow-y":"auto",

          },
          modelStyle:{
            width: '60%',
            style: { top: '20px' },
            fullScreen: false
          }
        }
      },
      created () {
      },
      methods: {
        detail (record) {
          this.visible = true;
          this.record = record;
        },
        handleCancel () {
          this.visible = false;
        },
        /** 切换全屏显示 */
        handleClickToggleFullScreen() {
          let mode = !this.modelStyle.fullScreen
          if (mode) {
            this.modelStyle.width = '100%'
            this.modelStyle.style.top = '20px'
          } else {
            this.modelStyle.width = '60%'
            this.modelStyle.style.top = '50px'
          }
          this.modelStyle.fullScreen = mode
        },
        toHandle(){
          if(this.record.openType==='url'){
            this.visible = false;
            //链接跳转
            this.$router.push({path: this.record.openPage})
          }
        },
      }
    }
  </script>

  <style lang="scss">
    .announcementCustomModal{
      .ant-modal-header {
        border: none;
        display: inline-block;
        position: absolute;
        z-index: 1;
        right: 56px;
        padding: 0;
        .ant-modal-title{
          .custom-btn{
            width: 56px;
            height: 56px;
            border: none;
            box-shadow: none;
          }
        }
      }
      .daily-article{
        border-bottom: 0;
      }
    }
  </style>
  <style scoped lang="scss">
    .daily-article {
      .article-button {
        font-size: 1.2rem !important;
      }
      .ant-card-body {
        padding: 18px !important;
      }
      .ant-card-head {
        padding: 0 1rem;
      }
      .ant-card-meta {
        margin-bottom: 1rem;
      }
      .article-content {
        p {
          word-wrap: break-word;
          word-break: break-all;
          text-overflow: initial;
          white-space: normal;
          font-size: .9rem !important;
          margin-bottom: .8rem;
        }
        a {
          color: #1890ff;
        }
      }
    }
  </style>
